<template>
    <div class="content">
        <div class="c-left" v-for="(item, index) in visitStatistics" :key="index">
            <div class="list-tit">{{ item.belongName }}</div>
            <ul>
                <li class="movehover" v-for="(info, infoIndex) in item.departList"> {{info.name}} ({{info.count}}) </li>
            </ul>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";

export default {
    name: '',
    filters: {
        ellipsis (value) {
            if (!value) return ''
            if (value.length > 32) {
                return value.slice(0,32) + '...'
            }
            return value
        }
    },
    data() {
        return {
            visitStatistics: []
        }
    },
    created() {
        this.getVisitStatistics()
    },
    methods : {
        getVisitStatistics() {
            request({
                url: '/business/statisticsVisits/' + 99999,
                method: 'get'
            }).then((res) => {
                this.visitStatistics = res.data.data
            })
        },
    }
}
</script>
<style scoped>
.c-left {
    width: 21.6%;
    display: inline-block;
    padding: 20px;
    text-align: center;
    float: left;
}

.list-tit {
    font-weight: bold;
    color: white;
    background-color: #f50000;
    height: 38px;
    line-height: 38px;
}

.c-left ul {
    border: 1px #CCCCCC solid;
}

.c-left ul li {
    line-height: 45px;
    border-bottom: 1px #CCCCCC dashed;
}

.c-left ul li:last-child {
    border: none;
}
</style>
